import React, {useEffect, useState} from 'react';
import {View, Text,} from '@tarojs/components';
import {Image, Search, Swiper, Tabs} from '@taroify/core';

import {goToSearchPage} from "@/app/utils/go";
import styles from './index.module.scss';
import GoodList from "@/app/pages/home/GoodList";
import Tabbar from "@/app/pages/home/Tabbar";

const Index: React.FC = () => {

    const [pageLoading, setPageLoading] = useState(true);
    const [imageList, setImageList] = useState<any[]>([]);


    useEffect(() => {
        load();
    }, []);

    const load = async () => {
        const images = [
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner1.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner2.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner3.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner4.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner5.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner6.png',
        ];
        setImageList(images)
        setPageLoading(false)

    };


    return (
        <View className={styles.page}>
            {pageLoading ? (
                <Text>加载中...</Text>
            ) : (
                <>
                    <View>
                        <Search shape={"rounded"} placeholder="iphone 13 火热发售中" onClick={() => goToSearchPage()}/>
                        <Swiper autoplay={4000} className={styles.swiper}>
                            <Swiper.Indicator/>
                            {
                                imageList && imageList.map((item, index) => (
                                    <Swiper.Item key={index} className={styles.swiper_item}>
                                        <Image src={item} mode={"scaleToFill"} className={styles.swiper_image}/>
                                    </Swiper.Item>

                                ))
                            }

                        </Swiper>
                        <Tabs sticky>
                            <Tabs.TabPane title="精选推荐">
                            </Tabs.TabPane>
                            <Tabs.TabPane title="夏日防晒">
                            </Tabs.TabPane>
                            <Tabs.TabPane title="二胎大作战">
                            </Tabs.TabPane>
                            <Tabs.TabPane title="人气榜">
                            </Tabs.TabPane>
                        </Tabs>
                        <GoodList></GoodList>
                    </View>
                </>
            )}

            <Tabbar value={0}></Tabbar>
        </View>
    );
};

export default Index;
